<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<link rel="stylesheet" type="text/css" href="css/index.css"/>
			<script src="js/reg.js"></script>
			<script src="js/jquery-1.11.3.js"></script>
			<script src="js/shuxing.js"></script>
			<script src="js/cookie.js"></script>
	</head>
	<body>
		<!---------------------------------------顶部导航--------------------------->		
		<div id="top">    
			<div class="w">
				<ul class="l">
					<li><a href="#">企业采购</a></li>
					<li><a href="#">帮助中心</a></li>
					<li><a href="#">收藏本站</a></li>
					<li><a href="#">商品入驻</a></li>
					<li><a href="#">老人手环申请</a></li>
					<li class="move">
						<i ></i>
						<a href="#">手机360商城</a>
					</li>
				</ul>
				<ul class="r">
					<li><a id="denglu" href="javascript:;">登录</a></li>
					<li><a id="reg" href="#">注册</a></li>
					<li style="color:#ccc;font-size: 12px;font-weight: 100;">丨</li>
					<li><a href="#">F码购买</a></li>
					<li><a href="#">我的订单</a></li>
				</ul>
			</div>
		</div>
<!---------------------------------------logo页面--------------------------->
		<div id="head" class="w">
			<h1><a href="index.html"><img src="img/logo.png"/></a></h1>
			<div class="wsearch">
				<input class="search" type="text" placeholder="360儿童机器人"/><input class="search_btn" type="button" />
				<div class="cart">
					<a href="cart.html">
						<i></i>
						我的购物车(
						<span class="count">0</span>
						)
					</a>
					<div class="cart_hover">
						请<a id="denglu_1" href="#">登陆</a>后查看您的购物车
					</div>
				</div>
				<p class="red">
					<a>360手机Q5</a>
					<a>360儿童手表5C</a>
					<a>360儿童机器人</a>
				</p>
			</div>
		</div>
		
		
<!---------------------------------------goods页面--------------------------->		
		
		<div id="goods" class="w">
			<div class="bg">
				<ul></ul>
			</div>
			<ul class="out">
				<li class="l one"><span></span><a href="list.html">全部智能酷品</a></li>
				<li class="l"><a href="#">手机</a>
					
				</li>
				<li class="l"><a href="#">行车记录仪</a></li>
				<li class="l"><a href="#">儿童手表</a></li>
				<li class="l"><a href="#">摄像机</a></li>
				<li class="l"><a href="#">路由器</a></li>
				<li class="l"><a href="#">儿童机器人</a></li>
				<li class="l"><a href="#">智品牌</a></li>
				<li class="l"><a href="#">一元夺宝</a></li>
				<li class="l"><a href="#">试用</a></li>
				<li class="l"><a href="#">社区</a></li>
			</ul>
		</div>
		<!---------------------------------------登录页面--------------------------->
		<div class="cover"></div>
		<div class="denglu">
			<div class="top">
				<li>
					<span>欢迎登陆360</span>
					<a class="close" href="#"></a>
				</li>
			</div>
			<div class="middle"></div>
			<div class="bot">
				<form >
					<p>
					<label><span>账号</span> <input id="txt2" type="text" placeholder="手机号/用户名/邮箱" /></label></p>
					<p>
					<label><span>密码</span> <input id="pwd4" type="password" placeholder="请输入您的密码" /></label></p>
					<p  class="ch">
					<label><input type="checkbox" checked="checked" />下次自动登录</label></p>
					<p class="denglu_2">
					<input class="btn4" type="button" value=""/></p>
					<p style="position: relative;color:black;font-size: 12px;"><span style="position: absolute;left:10px;display: inline-block;width:100px;">其他账号登录:</span>
						<a href="https://api.weibo.com/oauth2/authorize?client_id=3977697501&redirect_uri=http%3A%2F%2Fi.360.cn%2Foauth%2Fcallback%3Fc%3DSina%26f%3Dpcw_qikoo%26type%3Dpop%26destUrl%3Dhttp%253A%252F%252Fmall.360.com%252F&response_type=code&state=6eab35815f3c8aa038a71bb325df222c&forcelogin=true" style="background: url(img/dengluImg/dengluImg.png) no-repeat -400px -280px;display:inline-block;width:31px;height:26px;position: absolute;left:120px;top:8px"></a>
						<a href="http://graph.renren.com/oauth/grant?client_id=1de3e1af25b54e58a8713eca96765bf4&redirect_uri=http%3A%2F%2Fi.360.cn%2Foauth%2Fcallback%3Fc%3DRenRen%26f%3Dpcw_qikoo%26type%3Dpop%26destUrl%3Dhttp%253A%252F%252Fmall.360.com%252F&response_type=code&display=popup&scope=publish_feed&state=96e5124b79c0ec482965dabbaaf499eb&secure=true&origin=00000&x_renew=true" style="background: url(img/dengluImg/dengluImg.png) no-repeat -400px -305px;display:inline-block;width:31px;height:26px;position: absolute;left:151px;top:8px"></a>
						<a href="http://i.feixin.10086.cn/oauth2/authorize?response_type=code&client_id=4c50762423ae4da6b802a4ac72532cf4&redirect_uri=http%3A%2F%2Fi.360.cn%2Foauth%2Fcallback%3Fc%3DFetion%26f%3Dpcw_qikoo%26type%3Dpop%26destUrl%3Dhttp%253A%252F%252Fmall.360.com%252F&scope=basic&state=1b21f62f5a1061bba36c1776f600846e&display=popup" style="background: url(img/dengluImg/dengluImg.png) no-repeat -400px -330px;display:inline-block;width:31px;height:26px;position: absolute;left:182px;top:8px"></a>
						<a href="https://oauth.api.189.cn/emp/oauth2/authorize?app_id=192697150000029795&redirect_uri=http%3A%2F%2Fi.360.cn%2Foauth%2Fcallback%3Fc%3DTelecom%26f%3Dpcw_qikoo%26type%3Dpop%26destUrl%3Dhttp%253A%252F%252Fmall.360.com%252F&response_type=code&state=e05b02a750da95abdd238614e5799609" style="background: url(img/dengluImg/dengluImg.png) no-repeat -400px -355px;display:inline-block;width:31px;height:26px;position: absolute;left:213px;top:8px"></a>
					</p>
				</form>
			</div>
			<div class="foot">
				<ul>
					<li class="reg1"><a href="#" style="color:#999">注册新页面</a></li>
					<li style="color:#999">丨</li>
					<li><a href="http://i.360.cn/findpwd/" style="color:#0082cb">忘记密码？</a></li>
				</ul>
			</div>
		</div>
		
		
		
<!---------------------------------------注册页面--------------------------->		
		<div id="zhuce">
			<div class="out l">
				<div class="in">欢迎注册360账号</div>
				<a href="#" class="close1"></a>
			</div>
			<div class="left l">
				<div class="top">
					<div class="shouji"><span></span>手机注册<i></i></div>
					<div class="email"><span></span>邮箱注册<i></i></div>
				</div>
				<div class="bot">
					已有账号 ，<a class="denglu1" href="#">立即登录</a>
				</div>
			</div>
			<div class="right r"> 
				<div class="warnning"></div>
				<from class="ph">
					<p>
						<span>手机号</span>
						<input type="text" name="txt" id="txt" value="" />
						<i class="txt"></i>
						<b>请输入您的手机号</b>
					</p>
					
					<p>
						<span>验证码</span>
						<input type="text" name="txt" id="yzm" value="" /><i class="tu"></i>
						<i class="txt" ></i>
						<b>请输入图中的字母或数字，不区分大小写</b>
					</p>
					
					<p>
						<span>用户名</span>
						<input type="text" name="txt" id="user" value="" />
						<i class="txt"></i>
						<b>2-14个字符：英文、数字或中文</b>
					</p>
					
					<p>
						<span>密码</span>
						<input type="password" name="txt" id="pwd" value="" />
						<i class="txt"></i>
						<b>6-20个字符(区分大小写)</b>
					</p>
					
					<p>
						<span>确认密码</span>
						<input type="password" name="txt" id="pwd1" value="" />
						<i class="txt"></i>
						<b>请再次输入密码</b>
					</p>
					<input type="button" class="btn" value=""/>
					<label><input type="checkbox" class="check" value="" checked="checked"/>我已经阅读并同意</label><a href="http://i.360.cn/reg/protocol">《360用户服务条款》</a>
					
				</from>
				
				<from class="em">
					<p>
						<span>邮箱</span>
						<input type="text" name="txt" id="txt1" value="" />
						<i class="txt"></i>
						<b>请输入您的常用邮箱<a style="color:blue;" href="http://email.163.com/">没有邮箱？</a></b>
					</p>
					
					<p>
						<span>验证码</span>
						<input type="text" name="txt" id="yzm1" value="" /><i class="tu"></i>
						<i class="txt"></i>
						<b>请输入图中的字母或数字，不区分大小写</b>
					</p>
					
					<p>
						<span>用户名</span>
						<input type="text" name="txt" id="user1" value="" />
						<i class="txt"></i>
						<b>2-14个字符：英文、数字或中文</b>
					</p>
					
					<p>
						<span>密码</span>
						<input type="password" name="txt" id="pwd2" value="" />
						<i class="txt"></i>
						<b>6-20个字符(区分大小写)</b>
					</p>
					
					<p>
						<span>确认密码</span>
						<input type="password" name="txt" id="pwd3" value="" />
						<i class="txt"></i>
						<b>请再次输入密码</b>
					</p>
					<input type="button" class="btn" value=""/>
					<label><input type="checkbox" class="check" value="" checked="checked"/>我已经阅读并同意</label><a href="http://i.360.cn/reg/protocol">《360用户服务条款》</a>
					
				</from>
			</div>
		</div>
		<!---------------------------------------js代码--------------------------->
		
		<script>
			$(".denglu>.bot>form>p>label>input").focus(function(){
				$(this).css({
					"box-shadow":"3px 2px 6px 1px"
				});
			});
			$(".denglu>.bot>form>p>label>input").blur(function(){
				$(this).css({
					"box-shadow":"none"
				});
			});
			$(".denglu .foot .reg1").click(function(){
				$(".cover").css({"display":"block"});
				$("#zhuce").css({"display":"block"});
				$(".denglu").css({"display":"none"});
			});
			$("#zhuce .left>.bot>.denglu1").click(function(){
				$(".cover").css({"display":"block"});
				$("#zhuce").css({"display":"none"});
				$(".denglu").css({"display":"block"});
			})
			
			$("#zhuce>.right>.em input:not(:eq(5),:eq(6))").focus(function(){
				
				$(this).css("box-shadow","1px 3px 3px");
				
			});
			$("#zhuce>.right>.em input").blur(function(){			
				$(this).css("box-shadow","none")
			});
			$("#zhuce>.right>.ph input:not(:eq(5),:eq(6))").focus(function(){
				
				$(this).css("box-shadow","1px 3px 3px");
			});
			$("#zhuce>.right>.ph input").blur(function(){			
				$(this).css("box-shadow","none")
			});
			
			
			$("#denglu").click(function(){
				$(".cover").css({"display":"block"});
				$(".denglu").css({"display":"block"});
			});
			$("#reg").click(function(){
				$(".cover").css({"display":"block"});
				$("#zhuce").css({"display":"block"});
			});
			$("#denglu_1").click(function(){
				$(".cover").css({"display":"block"});
				$(".denglu").css({"display":"block"});
			});
			$(".close").click(function(){
				$(".cover").css({"display":"none"});
				$(".denglu").css({"display":"none"});
			});
			$(".close1").click(function(){
				$(".cover").css({"display":"none"});
				$("#zhuce").css({"display":"none"});
			});
			$(".search").focus(function(){
				$(this)[0].placeholder = "";
			});
			$(".search").blur(function(){
				if($(this)[0].innerHTML=="")
				$(this)[0].placeholder = "360儿童机器人";
			});
			$(".cart").mouseover(function(){
				$(".cart_hover").stop().show();
				$(this).find(":eq(0)").css({"color":"palegreen","height":42,"background": "white","position": "absolute","left":0,"top":0,"z-index": 111})
			});
			$(".cart").mouseout(function(){
				$(".cart_hover").stop().hide();
				$(this).find(":eq(0)").css({"color":"#bfbfbf","height":40,"background": "#f9f9f9","position": "absolute","left":0,"top":0,"z-index": 111,"color":"black"})
			});
			
			
//--------------获取到json数据------------------------------------------------------------------------
			var url = "js/phone.json";
			$.getJSON(url,function(obj){
				var arr = obj.list;
				$(".out>li:eq(1)").mouseenter(function(){
					$(".bg>ul>li").remove();
					$("#goods>.bg").stop().slideDown(300);
					for(var i=0;i<arr.length;i++){
					$(".bg>ul").append("<li><a href='#'><img src='"+arr[i].path+"'/><span>"+arr[i].title+"</span><i>"+arr[i].price+"</i></a></li>")
					}
					$(".bg>ul>li:last").css({"border":"none"})
				});
				$("#goods>.bg").mouseenter(function(){
					$(this).stop().slideDown(300);
				});
				$(".out>li:eq(1)").mouseleave(function(){
					$("#goods>.bg").stop().slideUp(300);
				});
				$("#goods>.bg").mouseleave(function(){
					$("#goods>.bg").stop().slideUp(300);
				});
				var arr1 = obj.car;
				$(".out>li:eq(2)").mouseenter(function(){
					$(".bg>ul>li").remove();
					$("#goods>.bg").stop().slideDown(300);
					for(var i=0;i<arr1.length;i++){
					$(".bg>ul").append("<li><a href='#'><img src='"+arr1[i].path+"'/><span>"+arr1[i].title+"</span><i>"+arr1[i].price+"</i></a></li>")
					}
					$(".bg>ul>li:last").css({"border":"none"})
				});
				
				$(".out>li:eq(2)").mouseleave(function(){
					$("#goods>.bg").stop().slideUp(300);
				});
				var arr2 = obj.childrenWatch;
				$(".out>li:eq(3)").mouseenter(function(){
					$(".bg>ul>li").remove();
					$("#goods>.bg").stop().slideDown(300);
					for(var i=0;i<arr2.length;i++){
					$(".bg>ul").append("<li><a href='#'><img src='"+arr2[i].path+"'/><span>"+arr2[i].title+"</span><i>"+arr2[i].price+"</i></a></li>")
					}
					$(".bg>ul>li:last").css({"border":"none"})
				});
				
				$(".out>li:eq(3)").mouseleave(function(){
					$("#goods>.bg").stop().slideUp(300);
				});
				var arr3 = obj.sxj;
				$(".out>li:eq(4)").mouseenter(function(){
					$(".bg>ul>li").remove();
					$("#goods>.bg").stop().slideDown(300);
					for(var i=0;i<arr3.length;i++){
					$(".bg>ul").append("<li><a href='#'><img src='"+arr3[i].path+"'/><span>"+arr3[i].title+"</span><i>"+arr3[i].price+"</i></a></li>")
					}
					$(".bg>ul>li:last").css({"border":"none"})
				});
				
				$(".out>li:eq(4)").mouseleave(function(){
					$("#goods>.bg").stop().slideUp(300);
				});
				var arr4 = obj.lyq;
				$(".out>li:eq(5)").mouseenter(function(){
					$(".bg>ul>li").remove();
					$("#goods>.bg").stop().slideDown(300);
					for(var i=0;i<arr4.length;i++){
					$(".bg>ul").append("<li><a href='#'><img src='"+arr4[i].path+"'/><span>"+arr4[i].title+"</span><i>"+arr4[i].price+"</i></a></li>")
					}
					$(".bg>ul>li:last").css({"border":"none"})
				});
				
				$(".out>li:eq(5)").mouseleave(function(){
					$("#goods>.bg").stop().slideUp(300);
				});
			});
			
			
			
//------------注册页面JQ---------------------------------------------------------------------
			$("#zhuce .right from p>.tu").html(""+Math.round(Math.random()*9)+Math.round(Math.random()*9)+Math.round(Math.random()*9)+Math.round(Math.random()*9));
				$("#zhuce .right from p>.tu").click(function(){
					$(this).html(""+Math.round(Math.random()*9)+Math.round(Math.random()*9)+Math.round(Math.random()*9)+Math.round(Math.random()*9));
				});
				$("#zhuce .left .shouji").click(function(){
					$("#zhuce .left .email").css("background","#fbfefe");
					$("#zhuce .left .email>span").css("background","url(img/dengluImg/dengluImg.png) no-repeat -440px -490px");
					$("#zhuce .left .email>i").css("background","none");
					$(this).css("background","#a7deef");
					$("#zhuce .left .shouji>span").css("background","url(img/dengluImg/dengluImg.png) no-repeat -440px -436px");
					$("#zhuce .left .shouji>i").css("background","url(img/dengluImg/dengluImg.png) no-repeat -383px -280px");
					$("#zhuce .right from.ph").css("display","block");
					$("#zhuce .right from.em").css("display","none");
					
				});
				$("#zhuce .left .email").click(function(){
					$("#zhuce .left .shouji").css("background","#fbfefe");
					$("#zhuce .left .shouji>span").css("background","url(img/dengluImg/dengluImg.png) no-repeat -440px -516px");
					$("#zhuce .left .shouji>i").css("background","none");
					$(this).css("background","#a7deef");
					$("#zhuce .left .email>span").css("background","url(img/dengluImg/dengluImg.png) no-repeat -440px -410px");
					$("#zhuce .left .email>i").css("background","url(img/dengluImg/dengluImg.png) no-repeat -383px -280px");
					$("#zhuce .right from.ph").css("display","none");
					$("#zhuce .right from.em").css("display","block");
				});
		</script>
	</body>
</html>
